<script setup lang="ts">
import { ref } from 'vue';
import cardSchema from './card.json';

const schemaContent = ref(JSON.stringify(cardSchema, null, '\t'));
const schema = ref<any>({});
function loadSchema() {
    const schemaObject = JSON.parse(JSON.stringify(cardSchema, null, '\t'));
    schema.value = schemaObject.contents[0];
}

function clearSchema() {
    schema.value = {};
}
</script>

<template>
    <div style="display: flex; width: 100%">
        <div style="width: 480px; display: flex; flex-direction: column; margin: 0 10px">
            <textarea v-model="schemaContent" style="width: 100%; border: 1px solid #d8dce6; flex: 1"></textarea>
            <div>
                <f-button style="margin: 10px 5px 0 5px" @click="loadSchema()">Load</f-button>
                <f-button style="margin: 10px 5px 0 5px" @click="clearSchema()">Clear</f-button>
            </div>
        </div>
        <div style="width: 1280px; height: 768px; position: relative">
            <f-dynamic-view v-model="schema"></f-dynamic-view>
        </div>
    </div>
</template>

<style>
#app {
    max-width: initial !important;
    margin: initial !important;
    padding: initial !important;
}
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
